<template>
  <!-- 训练营详情 -->
  <div class="train-item">
    <!-- top -->
    <van-nav-bar
      title="训练营"
      left-arrow
      @click-left="$router.go(-1)"
    ></van-nav-bar>
    <!-- body -->
    <div v-if="!loading" class="body">
      <!-- 大图片 -->
      <div class="wrap">
        <img :src="cover" />
      </div>
      <!--  -->
      <van-tabs color="#ffc641">
        <!-- 课程介绍 -->
        <van-tab title="课程介绍">
          <div class="main">
            <div class="box-1">
              <div class="intro">
                <span class="tag-name">训练营</span>
                <span class="class-name">{{ trainData.name }}</span>
              </div>
              <div class="author">
                <img :src="teacherCover" alt="" />
                <span class="author-name">{{ trainData.teacherName }}</span>
                <span class="author-title">{{ trainData.teacherTitle }}</span>
              </div>
              <div class="count">
                <span class="count">{{ trainData.usersCount }}人在学习</span>
              </div>
              <div class="price">
                <span class="label">优惠价</span>
                <span class="price">{{ trainData.price }}元</span>
                <s>{{ trainData.salePrice }}元</s>
              </div>
              <div class="content">
                <div v-for="i in trainData.trainingPlanItems" :key="i.id">
                  <h4 class="question">{{ i.name }}</h4>
                  <p class="answer">{{ i.content }}</p>
                  <img
                    class="ad"
                    v-for="(a, i) in adCoverArr"
                    :key="i"
                    :src="`https://file.ituring.com.cn/SmallCover/${a}`"
                  />
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="讲师介绍">
          <div class="main">
            <p
              class="teacher-info"
              v-for="t in trainData.teacherItems"
              :key="t.rank"
            >
              {{ t.content }}
            </p>
          </div>
        </van-tab>
        <van-tab title="课程列表">
          <div
            class="course-item"
            v-for="c in trainData.coursesList"
            :key="c.id"
            @click="toArticle(c.id, c.isFree)"
          >
            <div class="left">
              <img
                src="https://m.ituring.com.cn/img/icon_course_article.0e29c7dc.svg"
              />
              <span class="title">{{ c.title }}</span>
            </div>
            <div class="right">
              <i class="img" :class="c.isFree ? 'light' : ''"></i>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div v-if="loading" class="loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
    <!-- bottom -->
    <div class="bottom-buy">购买课程</div>
  </div>
</template>

<script>
import { TrainAPI } from "@/apis";
export default {
  props: ["id"],
  data() {
    return {
      loading: true,
      // 数据
      trainData: {},
    };
  },
  mounted() {
    this.loading = true
    this.getTrainData();
  },
  computed: {
    // 图片
    cover() {
      if (this.trainData.coverKey) {
        return `https://file.ituring.com.cn/LargeCover/${this.trainData.coverKey}`;
      } else {
        return "https://file.ituring.com.cn/LargeCover/";
      }
    },
    // 老师图片
    teacherCover() {
      if (this.trainData.coverKey) {
        return `https://file.ituring.com.cn/SmallCover/${this.trainData.teacherAvartarImageKey}`;
      } else {
        return "https://file.ituring.com.cn/SmallCover/";
      }
    },
    // 广告图片(array)
    adCoverArr() {
      let arr = [];
      this.trainData.trainingPlanItems.map((item) => {
        if (item.imageKey) {
          arr.push(item.imageKey);
        }
      });
      return arr;
    },
  },
  methods: {
    // 网络请求
    async getTrainData() {
      let { data } = await this.$http(TrainAPI(this.id));
      console.log(data);
      this.trainData = data;
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // to Article(要求登录)
    toArticle(id, isFree) {
      if (isFree) {
        this.$router.push(`/article/${id}`);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.train-item {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 999;
  .van-tabs__wrap {
    border-bottom: 1px solid #dae1e7;
  }
  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .body {
    padding: 50px 0;
    .wrap {
      margin-bottom: 5px;
      img {
        width: 100vw;
      }
    }
    .main {
      padding: 0 15px;
      // 1
      .box-1 {
        padding-top: 15px;
        .intro {
          display: flex;
          align-items: center;
          .tag-name {
            display: block;
            height: 20px;
            color: var(--book-name-font-black);
            font-size: 14px;
            padding: 3px 5px;
            background-color: #ffd029;
          }
          .class-name {
            color: var(--book-name-font-black);
            font-size: 14px;
            line-height: 30px;
            margin-left: 10px;
          }
        }
        .author {
          margin-top: 15px;
          display: flex;
          img {
            width: 20px;
            height: 20px;
            border-radius: 20px;
          }
          .author-name {
            color: var(--book-name-font-black);
            font-size: 14px;
            line-height: 20px;
            margin-left: 10px;
          }
          .author-title {
            color: #c8cdd4;
            font-size: 14px;
            line-height: 20px;
            margin-left: 10px;
          }
        }
        div.count {
          margin-top: 15px;
          padding-bottom: 10px;
          span.count {
            color: #c8cdd4;
            font-size: 14px;
            line-height: 20px;
          }
        }
        div.price {
          display: flex;
          span.label {
            color: #c8cdd4;
            font-size: 14px;
            line-height: 20px;
          }
          span.price {
            color: var(--tag-font-orange);
            font-size: 14px;
            line-height: 22px;
            margin-left: 15px;
            font-weight: 600;
          }
          s {
            color: #c8cdd4;
            font-size: 12px;
            line-height: 22px;
            margin-left: 5px;
          }
        }
        div.content {
          padding: 15px 0;
          h4.question {
            color: var(--book-name-font-black);
            font-size: 16px;
            line-height: 30px;
            margin-top: 15px;
          }
          p.answer {
            color: var(--book-name-font-black);
            font-size: 14px;
            line-height: 20px;
            margin-top: 5px;
          }
          img.ad {
            width: 345px;
            margin-top: 5px;
          }
        }
      }
      // 2
      p.teacher-info {
        color: var(--book-name-font-black);
        font-size: 14px;
        line-height: 24px;
        margin: 5px 0 0;
      }
    }
    // 3
    div.course-item {
      width: 375px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dae1e7;
      padding: 0 15px;
      div.left {
        display: flex;
        align-items: center;
        img {
          width: 18px;
          height: 22px;
          margin-right: 12px;
        }
        span.title {
          color: #000;
          font-size: 14px;
          line-height: 25px;
        }
      }
      div.right {
        .img {
          display: block;
          width: 22px;
          height: 22px;
          background-image: url("https://m.ituring.com.cn/img/icon_course_play_u.31b2ef42.svg");
          background-size: 22px 22px;
          &.light {
            background-image: url("https://m.ituring.com.cn/img/icon_course_play_a.df6b59e8.svg");
          }
        }
      }
    }
  }
  .bottom-buy {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ffc641;
    font-size: 14px;
    line-height: 30px;
    color: #333;
    text-align: center;
    padding: 10px 0;
  }
}
</style>